<template>
  <div class="replyList">
    <el-table :data="tableData"
              border
              size="mini">
      <el-table-column :label="$t('configLazyLoad.channel.replyMessage')">
        <template scope="scope">
          <div>{{scope.row.content}}</div>
        </template>
      </el-table-column>
      <el-table-column :label = "$t('configLazyLoad.channel.mailTip63')"
                       class-name="tags">
        <template scope="scope">
          <span v-for="(item,index) in scope.row.tags"
                @click="getTagContent(scope.row.tags[index]._id)">#{{item.name}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('public.operate')">
        <template scope="scope">
          <span class="edit"
                @click = "edit(scope.row)">{{$t('public.edit')}}</span>
          <span class = "del"
                @click = "openTip(scope.row)">{{$t('public.delete')}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    name: 'replySearchTable',
    data () {
      return {
      }
    },
    components: {
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    computed: {
    },
    methods: {
      cancel () {
        this.dialogVisible = false
      },
      openTip (obj) {
        let text = this.$t('configLazyLoad.channel.mailTip64', {content: obj.content})
        this.$confirm(text, this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          type: 'warning',
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn'
        })
        .then(() => {
          this.$emit('delReply', obj)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('config.agent.cancelDel')
          })
        })
        // this.reply = obj.content
        // this.id = obj._id
        // this.dialogVisible = true
      },
      edit (obj) {
        this.$emit('edit', obj)
      },
      del () {
        this.dialogVisible = false
        let id = this.id
        this.$emit('delReply', id)
      },
      getTagContent (id) {
        this.$emit('getTagContent', id)
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .replyList
    table
      tr
        td
          .edit
          .del
            cursor pointer
          .edit
            color $c-main
          .del
            color $c-pink
            margin-left 20px
        .tags
          span
            display inline-block
            margin 2px 0 0 10px
            padding 0px 4px
            height 16px
            line-height 16px
            cursor pointer
            color $cf-blue
</style>
